<script setup >
import { ref, reactive } from "vue";
import { NButton, NModal, NCard, useMessage } from "naive-ui";

const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
});

const emit = defineEmits(["change"]);
const message = useMessage();

let addressId = ref(null);
const showAddress = ref(null);
let showModal = ref(false);
const defaultAddress = props.list.find((item) => item.isDefault === 0) || null;

if (defaultAddress) {
  showAddress.value = defaultAddress;
} else {
  showAddress.value = props.list.length ? props.list[0] : null;
}
emit("change", showAddress.value && showAddress.value.id);

let defaults = ref(null);
// 切换地址信息
const changeAddress = (item) => {
  addressId.value = item.id;
  defaults.value = item;
};

// 打开模态框
const openModal = () => {
  addressId.value = showAddress.value && showAddress.value.id;
  showModal.value = true;
};

// 提交切换地址
const confirmAddress = () => {
  emit("change", addressId.value);
  if (addressId.value !== showAddress.value.id) {
    showAddress.value = defaults.value;
    message.success("切换地址成功");
  }
  showModal.value = false;
};

const addressDom = ref(null);
const openAddressEdit = (address) => {
  addressDom.value.open(address);
};

// 成功添加或修改地址
const successHadler = (form) => {
  const address = props.list.find((item) => item.id === form.id);
  if (address) {
    for (const key in address) {
      address[key] = form[key];
    }
  } else {
    props.list.unshift(form);
  }
};
</script>

<template>
  <div class="address">
    <div class="text">
      <div v-if="!showAddress" class="none">
        您需要先添加收货地址才可提交订单。
      </div>
      <ul v-else>
        <li>
          <span>收<i />货<i />人：</span>{{ showAddress.receiver }}
        </li>
        <li>
          <span>联系方式：</span
          >{{ showAddress.contact.replace(/^(\d{3})\d{4}(\d{4})/, "$1****$2") }}
        </li>
        <li>
          <span>收货地址：</span>{{ showAddress.fullLocation }}
          {{ showAddress.address }}
        </li>
      </ul>
      <a href="javascript:;" @click="openAddressEdit(showAddress)">修改地址</a>
    </div>
    <n-modal v-model:show="showModal">
      <n-card
        style="width: 600px"
        title="切换收货地址"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <div class="modal-card">
          <div
            class="text item"
            :class="{ active: addressId === item.id }"
            @click="changeAddress(item)"
            v-for="item in list"
            :key="item.id"
          >
            <ul>
              <li>
                <span>收<i />货<i />人：</span>{{ item.receiver }}
              </li>
              <li><span>联系方式：</span>{{ item.contact }}</li>
              <li>
                <span>收货地址：</span
                >{{ item.fullLocation.replace(/ /g, "") + item.address }}
              </li>
            </ul>
          </div>
        </div>
        <template #footer>
          <div class="modal-footer">
            <n-button
              type="primary"
              @click="confirmAddress"
              style="margin-right: 10px"
              >确认</n-button
            >
            <n-button @click="showModal = false">取消</n-button>
          </div>
        </template>
      </n-card>
    </n-modal>
    <address-edit ref="addressDom" @commit="successHadler"></address-edit>
    <div class="action">
      <n-button class="btn" @click="openModal">切换地址</n-button>
      <n-button class="btn" @click="openAddressEdit({})">添加地址</n-button>
    </div>
  </div>
</template>

<style scoped lang='less'>
.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}

.modal-card {
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;
      &.active,
      &:hover {
        border-color: @xtxColor;
        background: lighten(@xtxColor, 50%);
      }
      > ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
      }
    }
  }
}
</style>